<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>淘宝</title>
    <style>
      .box li a {
        /* 去除下横线 */
        text-decoration: none;
        color: black;
      }
      .box1 {
        width: 100%;
        height: 50px;
      }
      .box1 li {
        /* 去除无序列表前的圆点 */
        list-style: none;
        float: left;
        margin: 6px;
      }
      .one {
        margin-left: -20px;
      }
      .box2 {
        width: 100%;
        height: 700px;
      }
      .sp {
        display: inline-block;
        margin-left: 10px;
        border: solid rgb(207, 201, 201) 0.5px;
      }
      .sp,
      .sp1,
      .sp2,
      .sp3 {
        width: 300px;
      }
      .sp img,
      .sp1,
      .sp2,
      .sp3 {
        margin: 10px;
      }
      .bag {
        font-size: 40px;
      }
      .sml {
        font-size: 10px;
        /* 文字中间加横线 */
        text-decoration: line-through;
      }
      .left {
        margin-left: 60px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2 style="color: red">|热卖单品</h2>
      <div class="box1">
        <ul>
          <li><a href="#" class="one">客厅灯</a></li>
          <li><a href="#">床垫</a></li>
          <li><a href="#">电脑椅</a></li>
          <li><a href="#">男内裤</a></li>
          <li><a href="#">窗帘</a></li>
          <li><a href="#">鞋柜</a></li>
          <li><a href="#">沙发</a></li>
          <li><a href="#">收纳箱</a></li>
          <li><a href="#">茶几</a></li>
          <li><a href="#">椅子</a></li>
          <li><a href="#">抱枕</a></li>
          <li><a href="#">电脑桌</a></li>
          <li><a href="#">连衣裙</a></li>
          <li><a href="#">浴室柜</a></li>
          <li><a href="#">运动鞋</a></li>
          <li><a href="#">帆布鞋</a></li>
          <li><a href="#">电风扇</a></li>
          <li><a href="#">空调</a></li>
          <li><a href="#">面膜</a></li>
          <li><a href="#">拉杆箱</a></li>
          <li><a href="#">充电宝</a></li>
          <li><a href="#">男短袖</a></li>
          <li><a href="#">耳机</a></li>
          <li><a href="#">拖鞋</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">男鞋</a></li>
          <li><a href="#">牛仔裤</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">桌子</a></li>
        </ul>
      </div>
      <div class="box2">
        <div class="sp">
          <img src="xx.png" width="280px" />
          <div class="sp1">
            <a>泰迪熊正品 毛衣熊公仔 新品 女生生日礼物</a>
          </div>
          <br />
          <div class="sp2">
            <a style="color: gainsboro">评论255 收藏684</a>
          </div>
          <br />
          <div class="sp3">
            <a style="color: red">￥</a>
            <a style="color: red" class="bag">96</a>
            <a style="color: gainsboro" class="sml">￥472</a>
            <a style="color: gainsboro" class="left">月销62笔</a>
          </div>
        </div>
        <div class="sp">
          <img src="xz.png" width="280px" />
          <div class="sp1">
            <a>幼儿园数字字帖描红本 儿童凹槽写字本练习</a>
          </div>
          <br />
          <div class="sp2">
            <a style="color: gainsboro">评论0 收藏26132</a>
          </div>
          <br />
          <div class="sp3">
            <a style="color: red">￥</a>
            <a style="color: red" class="bag">13.8</a>
            <a style="color: gainsboro" class="sml">￥68</a>
            <a style="color: gainsboro" class="left">月销392笔</a>
          </div>
        </div>
        <div class="sp">
          <img src="jq.png" width="280px" />
          <div class="sp1">
            <a>磁性画板灰色家用写字板黑色板墙涂鸦板多功能</a>
          </div>
          <br />
          <div class="sp2">
            <a style="color: gainsboro">评论0 收藏3320</a>
          </div>
          <br />
          <div class="sp3">
            <a style="color: red">￥</a>
            <a style="color: red" class="bag">19.9</a>
            <a style="color: gainsboro" class="sml">￥39</a>
            <a style="color: gainsboro" class="left">月销51笔</a>
          </div>
        </div>
        <div class="sp">
          <img src="x.png" width="280px" />
          <div class="sp1">
            <a>逻辑思维训练机益智玩具创造力小学早教机</a>
          </div>
          <br />
          <div class="sp2">
            <a style="color: gainsboro">评论0 收藏84</a>
          </div>
          <br />
          <div class="sp3">
            <a style="color: red">￥</a>
            <a style="color: red" class="bag">1499</a>
            <a style="color: gainsboro" class="sml">￥2598</a>
            <a style="color: gainsboro" class="left">月销14笔</a>
          </div>
        </div>
        <div class="sp">
          <img src="bb.png" width="280px" />
          <div class="sp1">
            <a>儿童三轮拉杆书包小学生男孩6-12周岁女孩</a>
          </div>
          <br />
          <div class="sp2">
            <a style="color: gainsboro">评论2143 收藏29856</a>
          </div>
          <br />
          <div class="sp3">
            <a style="color: red">￥</a>
            <a style="color: red" class="bag">138</a>
            <a style="color: gainsboro" class="sml">￥629</a>
            <a style="color: gainsboro" class="left">月销710笔</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
